<template>
	<div class="person">
		<h1>情况五：监视上述的多个数据源</h1>
		<p>姓名：{{ person.name }}</p><br>
		<p>年龄：{{ person.age }}</p><br>
		<p>车辆：{{ person.cars.c1 }}、{{ person.cars.c2 }}</p><br>
		<button @click="changeName">修改名字</button>
		<button @click="changeAge">修改年龄</button>
		<button @click="changeC1">修改车辆1</button>
		<button @click="changeC2">修改车辆2</button>
		<button @click="changeCar">修改所有车辆</button>
	</div>
</template>
<script lang="ts" setup>
import { reactive, watch } from 'vue';
let person = reactive({
	name: '张三',
	age: 23,
	cars: {
		c1: '奔驰',
		c2: '宝马'
	}

})

function changeName() {
	person.name = '李四'
}
function changeAge() {
	person.age += 1
}
function changeC1() {
	person.cars.c1 = '大众'
}
function changeC2() {
	person.cars.c2 = '丰田'
}
function changeCar() {
	person.cars= { c1: '雅迪', c2: '爱玛' }
	//Object.assign(person.cars,{c1: '雅迪', c2: '爱玛'})
}
//监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
// watch(()=> person.name,(newVal,oldVal)=>{
// 	console.log("person.name变化了", newVal, oldVal)
// })
//监视，上述的多个数据源
watch([()=>person.name, ()=>person.cars.c1,],(newVal, oldVal)=>{
	console.log("person.cars变化了", newVal, oldVal)
},{deep:true})



</script>
<style>
.person {
	padding: 10px;
}
</style>
